<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + " ://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<jsp:include page="root_public.jsp"/>
<title>角色管理</title>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="javascript:;">首页</a>
        <a href="<%=path%>/adminRole">角色管理</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加用户','<%=path%>/adminAdd',450,450)"><i class="layui-icon">
        </i>添加
        </button>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>角色名</th>
            <th>角色英文名</th>
            <th>角色权限</th>
            <th>角色描述</th>
            <th>状态</th>
            <th>操作</th>
        </thead>
        <tbody class="tbody">
        </tbody>
    </table>
</div>

<script>
    findLists();
    /*
    * 获取角色列表
    * */
    function findLists() {
        var $tbody = $('.tbody');
        $.ajax({
            type: "post",
            url: "<%=path%>/role/findList",
            async: true,
            dataType: "json",
            success: function (data) {
                $tbody.html("");
                var datass = data.data.roleList;
                for (i = 0; i < datass.length; i++) {
                    var datas = datass[i],
                        useable = datas.useable,
                        menuList = datas.menuList,
                        nameList = "",
                        spans = '<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>',
                        as = '<a onclick="member_stop(this,\'10001\')" href="javascript:;" title="停用">\n' +
                            '                    <i class="layui-icon">&#xe601;</i>\n' +
                            '                </a>';
                    if (useable == 0) {
                        spans = '<span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">已停用</span>';
                        as = '<a onclick="member_stop(this,\'10001\')" href="javascript:;" title="启用">\n' +
                            '                    <i class="layui-icon">&#xe62f;</i>\n' +
                            '                </a>'
                    }

                    for (var j = 0; j < menuList.length; j++) {
                        nameList += menuList[j].name + ", ";
                    }
                    nameList = nameList.substring(0, nameList.length - 2);
                    var remarks = datas.remarks;
                    if (datas.remarks == null) {
                        remarks = "";
                    }

                    var $html = $('<tr>\n' +
                        '            <td>' + datas.name + '</td>\n' +
                        '            <td>' + datas.ename + '</td>\n' +
                        '            <td>' + nameList + '</td>\n' +
                        '            <td>' + remarks + '</td>\n' +
                        '            <td class="td-status">' + spans + '</td>\n' +
                        '            <td class="td-manage">\n' + as + '<div class="ID" style="display:none;">' +
                        datas.id + '</div>' +
                        '                <a title="编辑" onclick="x_admin_show(\'编辑\',\'<%=path%>/adminEdit?id=' + datas.id + '\',450,450)" href="javascript:;">\n' +
                        '                    <i class="layui-icon">&#xe642;</i>\n' +
                        '                </a>\n' +
                        '                <a title="删除" onclick="member_del(this,\'要删除的id\')" href="javascript:;">\n' +
                        '                    <i class="layui-icon">&#xe640;</i>\n' +
                        '                </a>\n' +
                        '            </td>\n' +
                        '        </tr>'
                    );
                    $tbody.append($html);
                }
            }
        });
    }

    /*用户-停用*/
    function member_stop(obj, id) {
        var $id = $(obj).siblings(".ID").text();
        layer.confirm('确认要' + $(obj).attr('title') + '吗？', function (index) {
            if ($(obj).attr('title') == '启用') {
                $.ajax({
                    type: "post",
                    url: "<%=path%>/role/isUseable",
                    async: true,
                    dataType: "json",
                    data: {
                        "id": $id,
                        "useable": 1
                    },
                    success: function (data) {
                        //发异步把用户状态进行更改
                        $(obj).attr('title', '停用');
                        $(obj).find('i').html('&#xe601;');
                        $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                        layer.msg('已启用!', {icon: 6, time: 1000});
                    }
                });
            } else {
                $.ajax({
                    type: "post",
                    url: "<%=path%>/role/isUseable",
                    async: true,
                    dataType: "json",
                    data: {
                        "id": $id,
                        "useable": 0
                    },
                    success: function (data) {
                        $(obj).attr('title', '启用');
                        $(obj).find('i').html('&#xe62f;');
                        $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                        layer.msg('已停用!', {icon: 5, time: 1000});
                    }
                });
            }
        });
    }

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            var $id = $(obj).siblings(".ID").text();
            $.ajax({
                type: "post",
                url: "<%=path%>/role/delete",
                async: true,
                dataType: "json",
                data: {
                    "id": $id
                },
                success: function (data) {
                    console.log(data);
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 600});
                }
            });
        });
    }

</script>

</body>

</html>